import { useSelector } from 'react-redux'
import TodoItem from './TodoItem'
const TodoMain = () => {
  const lists = useSelector((state) => {
    const { types, list } = state.todomvc
    if (types === 'active') {
      return list.filter((item) => !item.done)
    } else if (types === 'completed') {
      return list.filter((item) => item.done)
    } else {
      return list
    }
  })
  return (
    <section className='main'>
      <input id='toggle-all' className='toggle-all' type='checkbox' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      <ul className='todo-list'>
        {lists.map((item) => (
          <TodoItem key={item.id} item={item}></TodoItem>
        ))}
      </ul>
    </section>
  )
}

export default TodoMain
